<template>
  <div>
    <header>
      <div class="left">小米商城</div>
      <div class="left">MIUI</div>
      <div class="left">loT</div>
      <div class="left">云服务</div>
      <div class="left">金融</div>
      <div class="left">有品</div>
      <div class="left">小爱开放平台</div>
      <div class="right car">
        <img
          class="carImage"
          width="25px"
          height="25px"
          src="assets/icon-cart-checked.png"
          alt=""
        />
        购物车
      </div>
      <div class="right">登录</div>
    </header>
    <div class="clear"></div>

    <div class="bodyTop">
      <img class="logo left" src="/static/logo-footer.png" alt="" />

      <div class="nav left">
        <div class="left">电视</div>
        <div class="left">小米手机</div>
        <div class="left">RedMi红米</div>
        <div class="left">笔记本</div>
        <div class="left">路由器</div>
        <div class="left">家电</div>
      </div>

      <div class="left input1"></div>
      <div class="left input2">
        <img
          class="searchImage"
          src="requrie('assets/icon-search.png')"
          alt=""
        />
      </div>
    </div>
    <div class="clear"></div>

    <div class="phone">
      <div class="phoneTop">
        <div class="left">红米Note 7</div>
        <div class="right">概述 | 参数 | 用户评价</div>
      </div>
      <div class="clear"></div>

      <div class="phoneMiddle">
        <div class="banner">
          <template>
            <swiper
              class="swiper"
              :modules="modules"
              :pagination="{ clickable: true }"
            >
              <swiper-slide class="slide">Slide 1</swiper-slide>
              <swiper-slide class="slide">Slide 2</swiper-slide>
              <swiper-slide class="slide">Slide 3</swiper-slide>
              <swiper-slide class="slide">Slide 4</swiper-slide>
             
            </swiper>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//页面引入vue-awesome-swiper 及其样式

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    // 注册 vue-awesome-swiper 组件
    swiper,
    swiperSlide
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
header {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 40px;
  background-color: #333333;
  color: #f9fcfa;
  line-height: 40px;
  font-size: 13px;
}
header .left {
  padding-left: 20px;
}
header .right {
  padding-right: 20px;
}
.car {
  background-color: #fd503e;
  padding: 0 30px;
  margin-right: 40px;
}
.carImage {
  vertical-align: middle;
}
.logo {
  width: 45px;
  height: 45px;
  margin: 30px;
}
.nav {
  margin-left: 200px;
  margin-top: 50px;
}
.nav .left {
  margin-left: 20px;
  font-weight: bold;
}
.input1 {
  margin-left: 300px;
  margin-top: 30px;
  width: 200px;
  height: 45px;
  border: 1px solid #999999;
}
.input2 {
  position: relative;
  right: 1px;
  margin-top: 30px;
  width: 45px;
  height: 45px;
  border: 1px solid #999999;
}
.searchImage {
  width: 20px;
  height: 20px;
}
.phoneTop {
  margin-top: 50px;
}
.phoneTop .left {
  font-weight: bold;
  margin-left: 20px;
  cursor: pointer;
}
.phoneTop .right {
  margin-right: 20px;
}
.phoneMiddle {
  width: 80px;
  margin: 0 auto;
}
</style>